<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小小相册</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            
        }
        #box2{
            width: 90%;
            height: 100%;
            margin: 0 auto;
            text-align: center;
            background-image: url(image/0.jpg);
            background-attachment: fixed;
            background-size: 100% 100%;
            opacity: 0.9;
            padding-bottom: 200px;
        }
        .ph{
            margin: 30px;
            width: 200px;
            height: 150px;
            border-top: 3px solid #ee9900;
            border-bottom: 5px solid #cccccc;
            border-right: 4px solid #bbbb00;
            border-left: 2px solid #888811;

        }
       
        .ph:nth-of-type(14):hover{
            
            animation: shape 2s linear;
            animation-fill-mode: both;
            
        }
        @keyframes shape{
            0%{
                transform: scale(1,1) translate(0px) rotate(0deg);
                border-radius: 20px;
            }
            100%{
                transform: scale(2,2) translate(-10px) rotate(-10deg);
                border-radius: 50%;
            }
            
        }
        span{
            display: inline-block;
            background-image: url(image/1.jpg);
            background-size: 100% 100%;
        }
        #pho{
            width: 100%;
            height: 100%;
            opacity: 1;
        }
        #pho:hover{
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="box2">
        <span class="ph">
            <img src="image/8.jpg" alt="" id="pho">
        </span>
            
        <img src="image/2.jpg" alt="" class="ph">
        <img src="image/3.jpg" alt="" class="ph">
        <img src="image/4.jpg" alt="" class="ph">
        <img src="image/5.jpg" alt="" class="ph">
        <img src="image/6.jpg" alt="" class="ph">
        <img src="image/7.jpg" alt="" class="ph">
        <img src="image/8.jpg" alt="" class="ph">
        <img src="image/9.jpg" alt="" class="ph">
        <img src="image/10.jpg" alt="" class="ph">
        <img src="image/11.jpg" alt="" class="ph">
        <img src="image/12.jpg" alt="" class="ph">
        <img src="image/13.jpg" alt="" class="ph">
        <img src="image/14.jpg" alt="" class="ph">
        <img src="image/15.jpg" alt="" class="ph">            
        
    </div>    
        
    

</body>
</html>